import React from 'react';

import { demoUtil } from '../../utils';

import {
  ResourceManager,
  columnFieldsMap,
  formFieldsMap,
  ResourceManagerProps,
} from 'easyComponent';

import { commonData } from './commonData';

export default () => {
  const config: ResourceManagerProps = {
    componentsMap: { ...columnFieldsMap, ...formFieldsMap },
    rowKey: 'id',
    title: '用户管理',
    filterFields: [
      {
        label: '姓名',
        name: 'productId',
        componentName: 'InputFormField',
        placeholder: '请输入',
        position: 'MainViewExtra',
      },
      {
        label: '类型',
        name: 'type',
        componentName: 'SelectFormField',
        position: 'MainViewExtra',
        placeholder: '请选择',
        dataSource: () => {
          return new Promise(resolve => {
            resolve([
              { label: '类型1', value: '1' },
              { label: '类型2', value: '2' },
            ]);
          });
        },
      },
      {
        label: '时间段',
        name: 'dataRange',
        position: 'MainViewExtra',
        componentName: 'RangeDatePickerFormField',
      },
    ],
    fields: [
      {
        label: '姓名',
        name: 'name',
        componentName: 'TextColumnField',
      },
      {
        label: '操作',
        name: 'name',
        componentName: 'OperationColumnField',
        actions: [
          {
            label: '编辑',
            handler: () => {
              demoUtil.toastInfo('你点击了编辑');
            },
          },
        ],
      },
    ],
    actions: [
      {
        label: '按钮',
        position: 'MainViewExtra',
        type: 'primary',
        handler: () => {},
      },
    ],
  };

  return (
    <div>
      <ResourceManager
        {...config}
        dataSource={commonData.simpleDataSource}
        onChange={(event, args) => {
          console.log(event, 'hhh', args);
        }}
      />
    </div>
  );
};
